<template>
  <div class="attr-list">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="样式" name="1">
        <el-form class="form">
          <el-form-item
            v-for="(value, key) in styleKeys"
            :key="key"
            :label="map[key]"
          >
            <el-color-picker
              v-if="key == 'borderColor'"
              v-model="curComponent.style[key]"
            ></el-color-picker>
            <el-color-picker
              v-else-if="key == 'color'"
              v-model="curComponent.style[key]"
            ></el-color-picker>
            <el-color-picker
              v-else-if="key == 'background'"
              v-model="curComponent.style[key]"
            ></el-color-picker>
            <!-- <el-select
          v-else-if="key == 'textAlign'"
          v-model="curComponent[index]"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
            <el-input type="number" v-else v-model="curComponent.style[key]" />
          </el-form-item>
          <!-- <el-form-item
        label="内容"
        v-if="
          curComponent &&
          curComponent.propValue &&
          !excludes.includes(curComponent.component)
        "
      >
        <el-input type="textarea" v-model="curComponent.propValue" />
      </el-form-item> -->
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="数据" name="2">2 </el-collapse-item>
      <el-collapse-item title="内容" name="3">3</el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      componentData: (state) => state.component.componentData || [],
      curComponent: (state) => state.menu.curComponent || {},
    }),
    styleKeys() {
      return this.curComponent.style;
    },
  },
  data() {
    return {
      map: {
        background: "背景",
        color: "颜色",
        fontSize: "字体大小",
        fontWeight: "字体粗细",
        height: "高",
        width: "宽",
        letterSpacing: "字间距",
        lineHeight: "行高",
        rotate: "旋转",
        textAlign: "对齐",
        top: "高度",
        lineHeight: "行高",
        left: "左边距",
        borderRadius: "圆角边框",
        borderWidth: "边框大小",
        borderColor: "边框颜色",
        left: "左边距",
      },
      activeName: "1",
    };
  },
  created() {
    window.map = this.map;
    console.log("map", this.map);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.el-collapse {
  .form {
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-form-item {
      .el-input {
        width: 250px;
      }
    }
  }
}
</style>
